<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<ul>
				<li v-for=" u in users" :key="u">{{u}}</li>
				<button type="button" @click="add()">添加</button>
			</ul>
		</div>		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					users:["追梦","友谊","张寒"]
				},
				methods:{
					add(){
						// push()	向末尾添加元素
						// this.users.push("周生生","aa","bb")	
						
						//pop 
						// this.users.pop()
						
						// shift 删除数组中的第一个元素
						// this.users.shift()
						
						// unshift 从前面添加一个或多个元素
						// this.users.unshift("周周","娆月")
						
						/* 
								splice : 删除元素、插入元素、替换元素
						 */
						
						// 删除元素  下标，删除几个元素（如果没有传递，就删除后面所有的元素）
						// this.users.splice(1,2)
						
						// 插入元素 下标，0，要插入的元素
						// this.users.splice(1,0,"周周","周生生")
						// 替换  
						// this.users.splice(1,2,"周周","周生生")
						
						// 注意通过所以值修改数组中的元素，视图是不会更新。
						// this.users[1]="周生生"
						
						// vue中的set方法
						// 全局 set方法
						// Vue.set(this.users,1,"周生生")
						// 当前实例的 set的别名 (实例)
						this.$set(this.users,1,"周生生")
					}
				}
			})
		</script>
	 </body>
</html>
